$style-guide-bg = alpha(desaturate(#888, 50%), 8%)
$style-guide-text = darken(desaturate(#888, 80%), 20%)
$style-guide-bad-bg = alpha(desaturate($color_mac_close, 50%), 8%)
$style-guide-bad-text = darken(desaturate($color_mac_close, 80%), 20%)
$style-guide-good-bg = alpha(desaturate($color_mac_maximize, 50%), 8%)
$style-guide-good-text = darken(desaturate($color_mac_maximize, 80%), 20%)

$style-guide-priority-a-bg = $style-guide-bad-text
$style-guide-priority-a-color = white
$style-guide-priority-b-bg = $style-guide-bad-text
$style-guide-priority-b-color = white
$style-guide-priority-c-bg = steelblue
$style-guide-priority-c-color = white
$style-guide-priority-d-bg = $style-guide-bad-text
$style-guide-priority-d-color = white

.content
  details
    h2
      text-align: center
      margin-top: 0
  .style-example, details, .style-enforcement
    border-radius $radius
    margin: 1.6em 0
    padding: 1.6em
    h4
      margin-top: 0
    figure, p
      &:last-child
        margin-bottom: 0
        padding-bottom: 0
  .style-example
    h3
      margin-top: 2em
    &.example
      background: $style-guide-bg
      h4
        color: $style-guide-text
    &.example-bad
      background: $style-guide-bad-bg
      h4
        color: $style-guide-bad-text
    &.example-good
      background: $style-guide-good-bg
      h4
        color: $style-guide-good-text
details, .style-enforcement
  background-color: $style-guide-bg
details
  display: block // Add the correct display in IE and Edge.
  position: relative
  &:not([open]) summary
    &::after
      content: "..."
    &:hover
      background: rgba(255, 255, 255, .3)
summary
  cursor: pointer
  padding: 1.6em
  margin: -1.6em
  outline: none
  > h4
    display: inline-block
    margin: 0
.style-enforcement
  table
    width: 100%
    background-color: $codebg
    border-radius: $radius
  th, td
    padding: .4em
    text-align: center
  th
    padding-bottom: .2em
  td
    padding-top: .2em
.style-rule-tag
  background-color: $codebg
  border-radius: $radius
  font-size: .9em
  color: $style-guide-good-text
  font-weight: 600
  text-transform: uppercase
  padding: .1em .4em
a > .style-rule-tag
  color: $color_theme
sup
  text-transform: uppercase
  font-size: .7em
  margin-left: 1em
  pointer-events: all
  position: absolute
[data-p="a"]
  color: #6b2a2a
[data-p="b"]
  color: #8c480a
[data-p="c"]
  color: #2b5a99
[data-p="d"]
  content: #3f536d
